<template>
  <h1 class="row-title">对话框示例</h1>
  <div class="row">
    <wl-button type="primary" @click="() => visible = true">对话框1</wl-button>
    <wl-button type="primary" @click="() => visible2 = true">对话框2</wl-button>
    <wl-button type="primary" @click="() => visible3 = true">对话框3</wl-button>
  </div>
  <wl-dialog v-model:visible="visible">
    这是一个基本的示例
  </wl-dialog>
  <wl-dialog v-model:visible="visible2" title="这是一个自定义标题" width="30vw" top="40vh">
    这是一个基本的示例
  </wl-dialog>
  <wl-dialog v-model:visible="visible3" title="这是一个自定义标题">
    这是一个基本的示例
    <template #footer>
      <wl-button style="margin-right: 8px;" @click="() => visible3 = false">取消</wl-button>
      <wl-button type="primary">确定</wl-button>
    </template>
  </wl-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const visible = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
</script>

<style lang="scss" scoped></style>
